<template>
    <view class="home-container">

        <!-- 下拉刷新 -->
        <scroll-view class="home-scroll" scroll-y refresher-enabled :refresher-triggered="refreshing"
            @refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
            <!-- 顶部区域：搜索、欢迎语、轮播图 -->
            <HomeHeader />

            <!-- 核心功能区：任务待办、习惯打卡、专注时刻 -->
            <CoreFunctions />

            <!-- 校园动态通知区 -->
            <CampusNotifications />

            <!-- 推荐服务区 -->
            <ServiceRecommend />

            <!-- 近期招聘区 -->
            <RecruitmentCard />

            <!-- 底部加载状态 -->
            <view class="loading-more" v-if="loadingMore">
                <view class="loading-spinner"></view>
                <text>加载中...</text>
            </view>

            <!-- 底部安全区域 -->
            <view class="safe-area-bottom"></view>
        </scroll-view>

    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';

// 导入TabBar组件


// 导入组件
import HomeHeader from '@/components/home/HomeHeader.vue';
import CoreFunctions from '@/components/home/CoreFunctions.vue';
import CampusNotifications from '@/components/home/CampusNotifications.vue';
import ServiceRecommend from '@/components/home/ServiceRecommend.vue';
import RecruitmentCard from '@/components/home/RecruitmentCard.vue';

// 初始化 store
const store = useStore();

// 下拉刷新状态
const refreshing = ref(false);

// 加载更多状态
const loadingMore = ref(false);

// 页面数据
const pageData = ref({
    page: 1,
    hasMore: true
});

// 刷新首页数据
const refreshHomeData = async () => {
    try {
        // 重置页码
        pageData.value.page = 1;
        pageData.value.hasMore = true;
        
        // 显示加载状态
        uni.showLoading({
            title: '加载中...',
            mask: true
        });
        
        // 调用Vuex获取首页所有数据
        await store.dispatch('home/getHomeData');
        
        console.log('首页数据刷新成功');
    } catch (error) {
        console.error('刷新首页数据失败', error);
        uni.showToast({
            title: '刷新失败，请稍后再试',
            icon: 'none',
            duration: 2000
        });
    } finally {
        // 结束刷新状态
        refreshing.value = false;
        uni.stopPullDownRefresh();
        uni.hideLoading();
    }
};

// 加载更多数据
const loadMoreData = async () => {
    if (!pageData.value.hasMore || loadingMore.value) return;

    try {
        loadingMore.value = true;

        // 页码加1
        pageData.value.page += 1;

        // 加载更多社区动态和校园活动
        const [communityResult, activitiesResult] = await Promise.all([
            store.dispatch('home/loadMoreCommunityPosts'),
            store.dispatch('home/loadMoreActivities')
        ]);
        
        // 如果两个模块都没有更多数据，则标记没有更多
        if (!communityResult.hasMore && !activitiesResult.hasMore) {
            pageData.value.hasMore = false;
        }

        console.log('加载更多数据成功，当前页码：', pageData.value.page);
    } catch (error) {
        console.error('加载更多数据失败', error);
        // 失败时页码减1
        pageData.value.page -= 1;
        
        uni.showToast({
            title: '加载失败，请稍后再试',
            icon: 'none',
            duration: 1500
        });
    } finally {
        loadingMore.value = false;
    }
};

// 下拉刷新事件
const onRefresh = () => {
    refreshing.value = true;
    refreshHomeData();
};

// 触底加载更多事件
const onLoadMore = () => {
    if (pageData.value.hasMore) {
        loadMoreData();
    }
};

// 页面加载时获取数据
onMounted(() => {
    refreshHomeData();
});
</script>

<style lang="scss" scoped>
.home-container {
    min-height: 100vh;
    background-color: #f7f8fa;



    .home-scroll {
        height: 100vh;
    }

    .loading-more {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3vw 0;

        .loading-spinner {
            width: 4vw;
            height: 4vw;
            border: 0.8vw solid rgba(0, 0, 0, 0.1);
            border-top: 0.8vw solid #07c160;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 2vw;
        }

        text {
            font-size: 3.2vw;
            color: #999;
        }
    }

    .safe-area-bottom {
        height: 16vw;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}
</style>